<template>

  <div id="a" style="width: 1000px;height: 800px;"></div>
  <div id="b" style="width: 1000px;height: 800px;"></div>
  <div id="c" style="width: 1000px;height: 800px;"></div>
  <div id="d" style="width: 1000px;height: 800px;"></div>
  <div id="e" style="width: 1000px;height: 800px;"></div>
  
</template>

<script>

import {onMounted} from 'vue'
import * as echarts from 'echarts' 
import axios from 'axios'

export default {

  name: 'HelloWorld',
  
  setup() {

    let xydate;
    let xdate;
    let ydate;
    let ydate1;

    onMounted(() => {
      let myCharta = echarts.init(document.getElementById("a"))
      let myChartb = echarts.init(document.getElementById("b"))
      let myChartc = echarts.init(document.getElementById("c"))
      let myChartd = echarts.init(document.getElementById("d"))
      let myCharte = echarts.init(document.getElementById("e"))

      axios.get("/api/1").then((res) => {
        xydate = res.data

        filter()

        console.log("1 ==>", xydate)
        // 绘制图表
        myCharta.setOption({
          title: {
            text: '展示消费额最高的5个用户',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: xdate
          },
          yAxis: {
            type: 'value',
            scale: true,
          },
          series: [
            {
              data: ydate,
              type: 'bar'
            }
          ]
        })
      })
      

      axios.get("/api/2").then((res) => {
        xydate = res.data

        console.log("2 ==>", xydate)

        // 绘制图表
        myChartb.setOption({
          title: {
            text: '展示第一季度各地区的消费总额占比',
            left: 'center'
          },
          series: [
            {
              name: 'Area Mode',
              type: 'pie',
              radius: [20, 140],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5
              },
              data: xydate,
            }
          ]
        })

      })
      

      axios.get("/api/3").then((res) => {
        xydate = res.data

        filter()

        console.log("3 ==>", xydate)

        // 绘制图表
        myChartc.setOption({
          title: {
            text: '展示上半年商城总消费额的变化情况',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: xdate,
          },
          yAxis: {
            type: 'value',
            scale: true,
          },
          series: [
            {
              data: ydate,
              type: 'line'
            }
          ]
        })

      })
      

      axios.get("/api/4").then((res) => {
        xydate = res.data

        filter()

        console.log("4 ==>", xydate)

        // 绘制图表
        myChartd.setOption({
          title: {
            text: '展示消费总额最高的10个国家',
            left: 'center'
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            scale: true,
          },
          yAxis: {
            type: 'category',
            data: xdate
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              data: ydate
            }
          ]
        })
      })
      

      axios.get("/api/5").then((res) => {
        xydate = res.data

        filter1()

        console.log("5 ==>", xydate)

        // 绘制图表
        myCharte.setOption({
          legend: {
            data: ['Precipitation', 'Temperature']
          },
          xAxis: [
            {
              type: 'category',
              data: xdate,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'Precipitation',
              scale: true,
            },
            {
              type: 'value',
              name: 'Temperature',
              scale: true,
            }
          ],
          series: [
            {
              name: 'Precipitation',
              type: 'bar',
              data: ydate
            },
            {
              name: 'Temperature',
              type: 'line',
              yAxisIndex: 1,
              data: ydate1
            }
          ]
        })
      })
    })

    function filter() {
      xdate = xydate.map(x => x.nationname)
      ydate = xydate.map(x => x.totalconsumption)
    }

    function filter1() {
      xdate = xydate.map(x => x.nationname)
      ydate = xydate.map(x => x.nvalue)
      ydate1 = xydate.map(x => x.rvalue)
    }
  }
}
</script>
